<template>
  <div class="exception-handle">
    <div class="exception-header">
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="补录时间:">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="dateInput"
            size="small"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="exception-keyword" label="关键字:">
          <el-input v-model="queryForm.keyword" placeholder="请输入过磅单编号/往来名称/车牌号/业务编号查询"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select clearable v-model="queryForm.transProps" placeholder="全部">
            <el-option
              v-for="item in  $dictUtils.getDictList('transProps')"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList(
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.keyword,
                  dateInput,
                  queryForm.transProps
                )">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="add">补录过磅单</el-button>
    </div>
    <div class="exception-table">
      <!--      <div class="exception-table-title">-->
      <!--        总共 <span>85</span> 个条过磅单，其中已完成 <span style="color: #1890FF">10</span>条，未完成 <span-->
      <!--        style="color: #FF3E3E">75</span>条-->
      <!--      </div>-->
      <div class="exception-table-content">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%">
          <el-table-column type="index" label="序号" width="70"></el-table-column>
          <el-table-column label="过磅编号" prop="weightCode" min-width="140"></el-table-column>
          <el-table-column label="业务编号" prop="business.codes" min-width="140"></el-table-column>
          <el-table-column label="数据类别" min-width="140">
            <template slot-scope="scope">
                <span v-if="scope.row.business!=undefined">
                {{$dictUtils.getDictLabel("dataType", scope.row.business.dataType, "")}}
                </span>
            </template>
          </el-table-column>
          <el-table-column label="客户名称" prop="business.companyName" min-width="200"></el-table-column>
          <el-table-column label="产品名称" prop="product.name" min-width="200"></el-table-column>
          <el-table-column label="车牌号" prop="transport.truckNumber" width="100"></el-table-column>
          <el-table-column label="车轴类型" prop="axle.axle" width="100"></el-table-column>
          <el-table-column label="毛重">
            <template slot-scope="scope">
              {{scope.row.weightGross | thousandSep}}
            </template>
          </el-table-column>
          <el-table-column label="皮重" prop="weightTare">
            <template slot-scope="scope">
              {{scope.row.weightTare | thousandSep}}
            </template>
          </el-table-column>
          <el-table-column label="净重" prop="netWeight">
            <template slot-scope="scope">
              {{scope.row.netWeight | thousandSep}}
            </template>
          </el-table-column>
          <el-table-column label="皮重时间" prop="tare.weightTime" min-width="170">
          </el-table-column>
          <el-table-column label="毛重时间" prop="gross.weightTime" min-width="170">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="page.pageSize"
          :current-page="page.pageNo"
          layout="total,sizes,prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
      <AddWeightForm ref="addWeightForm" @refreshDataList="getList(page, orderBy.name, orderBy.method, queryForm.keyword, dateInput, queryForm.transProps)"></AddWeightForm>
  </div>
</template>

<script>
  import { getList } from '@/api/weightingManagent/weight.js'
  import AddWeightForm from './addWeightForm'
  export default {
    components: {
        AddWeightForm
    },
    data () {
      return {
        dateInput: '',
        value1: [],
        input: '',
        checked: true,
        tableData: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        queryForm: {
          keyword: '',
          startTime: '',
          endTime: '',
          processType: '',
          transProps: ''
        },
        orderBy: {
          name: '',
          method: ''
        }
      }
    },
    methods: {
      handleSizeChange (e) {
        this.page.pageSize = e
        this.getList(this.page, this.orderBy.name, this.orderBy.method, this.queryForm.keyword, this.dateInput, this.queryForm.transProps)
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.getList(this.page, this.orderBy.name, this.orderBy.method, this.queryForm.keyword, this.dateInput, this.queryForm.transProps)
      },
      viewDetail (row) {
        this.$refs.details.init('view', row)
      },
      // 发卡记录
      operateList (row) {
        this.$refs.operateDetail.init('send', row)
      },
      reset () {
        this.queryForm.keyword = ''
        this.queryForm.startTime = ''
        this.queryForm.endTime = ''
        this.queryForm.transProps = ''
        this.dateInput = ''
      },
      // 获取列表带分页
      getList (params, orderName, orderByAORC, keyword, date, transProps) {
        this.loading = true
        getList({
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          orderBy: orderName,
          orderByAORC: orderByAORC,
          keyword: keyword,
          startTime: date == null ? null : date[0],
          endTime: date == null ? null : date[1],
          transProps: transProps
        }).then(({data}) => {
          if (data.code === '200') {
            this.tableData = data.result.page.list
            this.page.total = data.result.total.totalCount
            this.loading = false
          }
        })
      },
      changeHandlerDate (e) {
        this.queryForm.startTime = e[0]
        this.queryForm.endTime = e[1]
      },
        // 补录过磅单
        add () {
            this.$refs.addWeightForm.init('add')
        }
    },
    mounted () {
        this.getList(this.page, this.orderBy.name, this.orderBy.method, this.queryForm.keyword, this.dateInput, this.queryForm.transProps)
    }
  }
</script>

<style lang="scss" scoped>
@import '@/assets/scss/config.scss';
  .exception-handle {
    .exception-header {
      ::v-deep.el-form{
        .el-form-item__label,.el-form-item__content{
          line-height: 36px;
        }
        .el-range-editor.el-input__inner {
          width: 383px;
          height: 36px;
          border: 1px solid #CCCCCC;
          border-radius: 3px;

          .el-range__icon, .el-range__close-icon {
            line-height: 28px;
          }

          .el-range-separator {
            line-height: 28px;
            width: 7%;
          }
        }
        .el-form-item.exception-keyword{
          margin-left: 50px;
        }
        .el-form-item{
          margin: 0;
        }
        .el-button {
          width: 60px;
          height: 36px;
          font-size: 14px;
          border-radius: 4px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          padding: 0;
          line-height: 36px;
        }

        .el-button--primary {
          background: #1890FF;
          color: #FFFFFF;
          margin-left: 50px;
          margin-right: 5px;
        }

        .el-button--primary:active {
          background: #167AD9;
        }

        .el-button--default {
          background: #fff;
          border: 1px solid #AAAAAA;
          color: #666666;
        }

        .el-button--default:active {
          color: #1890ff;
          border-color: #1890ff;
        }
      }

      .weigh-time-mark {
        width: 69px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        margin-right: 10px;
      }

      .weigh-keyword {
        margin-left: 30px;
        width: 53px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }

      ::v-deep.el-input {
        width: inherit;
        height: 36px;
        margin-left: 10px;

        input {
          width: 250px;
          height: 36px;
          border: 1px solid #AAAAAA;
          border-radius: 4px;
          color: #333333;
        }

        input:hover, input:focus {
          border-color: #1890ff;
        }

        .el-input__inner::-webkit-input-placeholder {
          color: #999999;
        }
      }


    }

    ::v-deep.exception-table {
      margin-top: 20px;
      .el-table__header-wrapper{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
      }
      th{
        height: 46px;
        background: #EEEEEE;
        padding: 0;
        /*border-color: #dddddd;*/
      }

      .el-table__row{
        td{
          /*padding: 0;*/
          /*border-color: #dddddd;*/
        }
        .cell{
          /*text-align: center;*/
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          /*height: 48px;*/
          /*padding: 6px 5px;*/
          box-sizing: content-box;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: 25px;

        }
        td:not(:nth-child(3)) .cell{
          text-align: center;
        }
        .el-link,.el-dropdown-link,.el-icon-arrow-down{
          font-size: 16px;
        }
        .el-dropdown-link {
          cursor: pointer;
          color: $--color-primary-liyu;;
        }
        .el-link--inner{
          margin-right: 10px;
        }
        .el-link:last-child .el-link--inner{
          margin-right: 0;
        }
        .el-link.is-underline:hover:after{
          border-bottom: none;
        }
      }
    }

  }
</style>
